<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
        
  <!-- TODO:响应式原理数据劫持的理解
  复习Object.defineProperty
  目标：
  1.给对象添加操作指定属性，并进行基础操作添加、修改、删除操作
  2.利用指定数据配合对象，进行响应式数据处理 -->
        
  <script type="text/javascript">
    let number = 18;
    let person = {
      name: '费覅',
      gender: '男',
    };
          // ! 普通对象
  Object.defineProperty(person, 'age', {
  // value: 18, 只能给对象添加一个属性，并且设置其值
  // writable: true, 是否可修改
  // enumerable: true, 是否可枚举
  // configurable: true, 是否可删除
  get() {
  // 1)响应式属性节点可以通过(...)进行点击触发
    console.log('现在进行的是get操作', this);
    return number;
  },
  set(val) {
    console.log('现在进行的是set操作', val);
    number = val;
  },
    });

  console.log(person);
    person.age = 20;
  // delete person.age;
  // # 数组以及对象的循环方式有哪些？
  for (let key in person) {
        console.log(key);
    };
  console.log(person);
  // ! 最为基本的响应式原来就是给普通对象的属性添加上getter/setter
  // 2.响应式属性节点可以通过直接属性的调用获取来触发getter
  // console.log(person.age);
  // person.age = 20;
  </script>
</body>
</html>